import React from 'react';
import { Carousel, Card, List, Input, Menu,Button } from 'antd';
import { SearchOutlined,LeftOutlined,RightOutlined } from '@ant-design/icons';
import { Link } from 'react-router-dom';

const { Search } = Input;

// 模拟数据
// id 1 且不是一位数的 是热门书籍
// id 2 且不是一位数的 开头是新书
// id 为一位数是推荐书籍
const recommendedBooks = [
  { id: 1, title: '推荐书籍 1', cover: '/book_img/1.png' },
  { id: 2, title: '推荐书籍 2', cover:  '/book_img/2.png' },
  { id: 3, title: '推荐书籍 3', cover:  '/book_img/3.png' },
  { id: 4, title: '推荐书籍 4', cover:  '/book_img/4.png' },
];

const hotBorrowList = [
  { id: 11, title: '热门书籍 1', author: '作者 1' },
  { id: 12, title: '热门书籍 2', author: '作者 2' },
  { id: 13, title: '热门书籍 3', author: '作者 3' },
  { id: 14, title: '热门书籍 4', author: '作者 4' },
];

const newBooks = [
  { id: 21, title: '新书 1', author: '作者 1' },
  { id: 22, title: '新书 2', author: '作者 2' },
  { id: 23, title: '新书 3', author: '作者 3' },
  { id: 24, title: '新书 4', author: '作者 4' },
];
const username = '示例用户';

const HomePage = () => {

  const handleLogout = () => {
    // 这里可以添加退出登录的逻辑
    console.log('用户退出登录');
  };

  return (
    <div style={{backgroundColor: '#f7f7fc'}}>
      {/* 导航菜单 */}
      <div style={{display: 'flex',backgroundColor: '#ebe8e7',justifyContent: 'center', alignItems: 'center' }}>
        <Menu mode="horizontal" style={{ backgroundColor: '#ebe8e7' }} defaultSelectedKeys={['0']}>
          <Menu.Item key="0"><Link to="/">首页</Link></Menu.Item>
          <Menu.Item key="1"><Link to="/">网络小说</Link></Menu.Item>
          <Menu.Item key="2"><Link to="/">科学</Link></Menu.Item>
          <Menu.Item key="3"><Link to="/">物理</Link></Menu.Item>
          {/* 添加更多分类 */}
          <Menu.Item key="4"><Link to="/">历史</Link></Menu.Item>
          <Menu.Item key="5"><Link to="/">文学</Link></Menu.Item>
          <Menu.Item key="6"><Link to="/">艺术</Link></Menu.Item>
          <Menu.Item key="7"><Link to="/">计算机</Link></Menu.Item>
          <Menu.Item key="8"><Link to="/">哲学</Link></Menu.Item>
        </Menu>
        <div style={{ marginLeft:'200px',width: '200px', marginRight: '-300px' }}>
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <span style={{ marginRight: 10 }}>欢迎，{username}</span>
            <Button onClick={handleLogout}>退出</Button>
          </div>
        </div>
      </div>
      <div style={{width: '80%',margin: '0 auto'}}>
          {/* 快速搜索栏 */}
        <Search
          placeholder="搜索书籍"
          enterButton={<SearchOutlined />}
          size="large"
          style={{ margin: '20px 0' }}
        />

      {/* 轮播图（推荐书籍） */}
        <Carousel 
          autoplay 
          // 左右轮播按键
          prevArrow={<LeftOutlined style={{ fontSize: '24px', color: 'white' }} />}
          nextArrow={<RightOutlined style={{ fontSize: '24px', color: 'white' }} />}
        >
          {recommendedBooks.map((book) => (
            <div key={book.id}>
              <Card
                hoverable
                // "bordered" 已弃用，使用 "borderless" 替代
                style={{ border: 'none' }}
                Link={`/book/${book.id}`}
                
                cover={
                  
                <img alt={book.title} 
                src={book.cover} 
                style={{
                  width: '100%',  // 宽度自动保持原始比例
                  height:'400px', // 高度固定为 200px
                  // objectFit: 'fill', // 保持纵横比并覆盖整个容器
                }}
                />}
              >
                <Card.Meta title={book.title} />
              </Card>
            </div>
          ))}
        </Carousel>

      {/* 热门借阅榜单 */}
         <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <Card title="热门借阅榜单" style={{ margin: '20px 0', border: 'none', flex: 1, marginRight: '10px' }}>
            <List
              itemLayout="horizontal"
              dataSource={hotBorrowList}
              renderItem={(item) => (
                <List.Item>
                  {/* 修正意外标记，补全 List.Item.Meta 组件 */}
                  <List.Item.Meta
                    title={<Link to={`/book/${item.id}`}>{item.title}</Link>} 
                    description={item.author} 
                  />
                </List.Item>
              )}
            />
          </Card>

          {/* 新书速递模块 */}
          <Card title="新书速递" style={{ margin: '20px 0', border: 'none', flex: 1, marginLeft: '10px' }}>
            <List
              itemLayout="horizontal"
              dataSource={newBooks}
              renderItem={(item) => (
                <List.Item>
                 <List.Item.Meta 
                  title={<Link to={`/book/${item.id}`}>{item.title}</Link>} 
                  description={item.author} 
                />  
                </List.Item>
              )}
            />
          </Card>
        </div>
      </div>  
    </div>
  );
};

export default HomePage;